<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./Css/style.css">
</head>

<body>
    <div id='app' v-cloak>
        <template v-if='list.length'>
            <table >
                <thead>
                    <tr>
                        <!-- 根据选中的来双向绑定，根据事件来调用方法  -->
                        <th><input type="checkbox" v-model:checked='isAll'  @change="hendleAll()"  ></th>
                        <th>商品类别</th>
                        <th>id</th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody  v-for='(item,index) in catList' >
                    <tr v-for=' (xi ,xindex) in item.list'>
                        <!-- v-bind:checked 绑定动态的是否选中  v-on:change 表示变化事件，调用方法  -->
                        <th><input type="checkbox"  v-model:checked='xi.isrRadio'  @change="hendleRadio()" ></th>
                        <th>{{item.ctaName}}</th>
                        <th>{{xi.id}}</th>
                        <th>{{xi.name}}</th>
                        <th>{{xi.price}}</th>
                        <th>                           
                            <button @click="handleReduce(xindex,xi.id)"  :disabled="xi.count===1">-</button>
                            {{xi.count}}
                            <button @click="handleAdd(xindex,xi.id)">+</button>
                        </th>
                        <th>
                            <button @click="handleRemove(item.list,xindex)">移除</button>
                        </th>
                </tr>
                </tbody>
            </table>

            <div>总价:￥{{totalPrice}}</div>
        </template>
        <div v-else>
            购物车为空
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="./Js/index.js"></script>
</body>

</html>